<template>
    <div>
        <div style="height:0.9rem;"></div>
        <!-- 首页banner -->
        <div class="index-banner">
            <div class="swiper-container" id="swiper">
                <div class="swiper-wrapper" >
                    <div class="swiper-slide" v-for="(item,index) in banner" :key="index">
                        <a :href="item.link"><img :src="item.images"/></a>
                    </div>		
                </div>
            </div>
       </div>
        <!-- 协会简介 -->
        <div class="assoc-brief-box">
            <div class="assoc-title">{{profile.title}}</div>
            <div class="assoc-cont">{{profile.synopsis}}</div>
            <p class="more" @click="toPageFn('/aboutus')">查看更多</p>
        </div>
        <!-- 协会主要领导 -->
        <div class="index-user-box">
            <div class="index-user-title-box flex flex-align-center">
                <p class="title flex-1">协会主要领导</p>
                <p class="user-more" @click="toPageFn('/member')">全部领导 ></p>
            </div>
            <div class="index-img-box">
                <div class="swiper-container" id="mien">
                <div class="swiper-wrapper" >
                    <div class="swiper-slide user-item" v-for="(item,index) in mien" :key="index">
                                <img :src="item.images" alt="">
                                <p class="name">{{item.name}} / <span>{{item.post}}</span></p>
                                <p class="cont">{{item.synopsis}}</p>
                    </div>		
                </div>
            </div>
            </div>
        </div>
        <!-- 行业资讯 -->
        <div class="index-industry-news">
            <div class="index-industry-title">行业资讯</div>
            <div class="index-dustry-list flex flex-align-center" @click="toDetailes(item.id)"
              v-for="(item,index) in dustry" :key="index">
                <img :src="item.images" alt="">
                <div class="index-dustry-cont">
                    <p class="dustry-cont-title">{{item.title}}</p>
                    <p class="dustry-cont-cont">{{item.content}}</p>
                    <p class="dustry-cont-time">{{item.create_time}}</p>
                </div>
            </div>
        </div>
        <div class="more">
                <p class="info-more" @click="toPageFn('/industryinfo')">
                    查看更多
                </p>
        </div>
        <!-- 首页底部信息 -->
        <div class="index-footer-info">
            <p class="footer-title">联系我们</p>
            <div class="img-box flex flex-align-center">
                <img :src="contact.images" alt="">
                <div class="info-text-cont">
                    <p class="info-name">{{contact.title}}</p>
                    <div class="info-box">
                        <p>{{contact.add}}</p>
                        <p>{{contact.address}}</p>
                        <p>联系人:{{contact.phone}}({{contact.contacts}})</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import {format, strFormat} from '../public/utils'
export default {
    data () {
        return {
            banner:'', // 轮播
            profile:'', // 公司简介
            dustry:'', // 行业资讯
            contact:'', // 底部信息
            mien:'', //协会领导
        }
    },
    created () {
        this.$store.commit('setTitle',"网站首页");
        this.$store.commit('setIndex',0); //初始化导航状态选中网站首页;
        this.apiIndex();
    },
    methods: {
        // 请求首页数据
        async apiIndex(){
            let {data} = await this.https.get(this.api.apiIndexPage);
            this.banner = data.banner;
            this.profile = data.profile;
            data.dustry.forEach((ele, i) => {
                ele.create_time = format(ele.create_time);
                ele.content = strFormat(ele.content,28);
                ele.title = strFormat(ele.title,22);
            });
            this.dustry = data.dustry;
            this.contact = data.contact;
            this.mien = data.mien;
            this._initBanner();
            this._initMien();
        },

        toPageFn(url){
            this.$store.commit('setMenu',url);
            this.$router.push(`${url}`);
        },

        toDetailes(id){
            this.$store.commit('setTitle',"最新资讯");
            this.$router.push(`/info/${id}`);
        },

        // 初始化轮播
        _initBanner(){
            setTimeout(function () {
               var swiperObj =  new Swiper('#swiper', {
                    loop: true,
                    autoplay:4000,
                    paginationClickable: false
                });
                }, 100);
        },

        // 初始化手势滑动
        _initMien(){
            setTimeout(function () {
               var swiperObj =  new Swiper('#mien', {
                    loop: true,
                    paginationClickable: false,
                    slidesPerView: 3,
                    spaceBetween: 10
                });
                }, 100);
        }
    }
}
</script>
<style lang="less" scoped>
@import url(../assets/css/index/index.less);
</style>


